<!DOCTYPE html>
<html>
    <head lang = "en">
        <meta charset = "UTF-8">
        <meta name = "viewport">
        <title>支付</title>
    	<link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
        <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
        <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'></script>
        
        <style>
            img:hover{
                cursor: pointer;
            }
            body{
                background-color: #BBFFFF;
            }
        </style>
    </head>
    <body onload = "leftTimer()">
        <h1><a href = "index.jsp" style = "text-decoration:none;">&nbsp;华为商城</a><small>&nbsp;支付</small></h1>
        
        <span style = "margin-left:20px;line-height:50px;"><a href='personal.jsp'><input type='button' value='个人中心' class='btn btn-success' style='text-decoration:none;'></a></span>
        
        <div id = "pay" style = "margin-left:38%;margin-top:60px;">
            <img src = "imgs/支付二维码.png"/>
            
            <label style = "font-size:23px;color:red;font-weight:bold;" id="timer"></label>
            
        </div>
        <div id = "success" style = "margin-left:29%;margin-top:111px;width:600px;height:100px;background-color:#98F5FF;display:none;">
            <p style = "color:green;font-size:33px;text-align:center;line-height:98px;">支付成功</p>
            
            <!--<a href = "http://xyc.life/personal.html" style = "text-decoration:none;"/>个人中心</a>-->
        </div>
        
        <script>
        
            function stopTimer(){
                clearTimeout(timer);
            }
        
            $("#pay").click(function(){
                $("#success").show(200)
                stopTimer();
            })
            
            var maxtime = 30 * 60;   
            function CountDown() {
                if (maxtime >= 0) {
                    minutes = Math.floor(maxtime / 60);
                    seconds = Math.floor(maxtime % 60);
                    msg = "&nbsp;&nbsp;支付倒计时,剩余" + minutes + "分" + seconds + "秒";
                    document.all["timer"].innerHTML = msg;
                    if (maxtime == 5 * 60)alert("还剩5分钟");
                        --maxtime;
                } else{
                    clearInterval(timer);
                    alert("时间到，结束!");
                }
            }
            timer = setInterval("CountDown()", 1000);  
            
            
        </script>
    </body>
</html>